<template>
	<div id="newActivity" class="newActivity">
		<group>
			<cell class="newActivityCell" title="活动类型" :value="activity_type" is-link @click.native="showPopup=true"></cell>
			<datetime class="newActivityCell" v-model="minuteListValue" format="YYYY-MM-DD HH:mm" :minute-list="['00', '15', '30', '45']" :title="time"></datetime>
		</group>
		<div>
			<PickList ref="employeeRef" url="users/users_pop" cellTitle="咨询" listTitle="咨询列表"></PickList>
			<PickList ref="customerRef" url="customers/customers_pop" cellTitle="客户" listTitle="客户列表"></PickList>
			<x-textarea :max="200" name="description" placeholder="备注" v-model="content"></x-textarea>
		</div>

		<div v-transfer-dom>
			<popup v-model="showPopup" class="checker-popup">
				<div style="padding:10px 10px 40px 10px;">
					<p style="padding: 5px 5px 5px 2px;color:#888;">活动类型</p>
					<checker
						v-model="activity_type"
						default-item-class="demo4-item"
						selected-item-class="demo4-item-selected"
						disabled-item-class="demo4-item-disabled">
						<checker-item v-for="(item,index) in items" :value="item.value" @on-item-click="onItemClick(item.id)"> {{item.value}} </checker-item>
					</checker>
				</div>
			</popup>
		</div>

		<div class="error" v-show="error">{{error}}</div>

		<flexbox>
			<flexbox-item>
				<x-button class="flexBtn_confirm" :gradients="['#FF5E3A', '#FF9500']" @click.native="createActivity">确定</x-button>
			</flexbox-item>
			<flexbox-item>
				<x-button class="flexBtn_cancel" @click.native="cancel">取消</x-button>
			</flexbox-item>
		</flexbox>

	</div>
</template>

<script>
	import bus from '@/event/eventBus'
	import dateutils from '@/utils/date'
	import NetWorking from '../../../../utils/networking'
	import PickList from '../../../../components/mobile/picklist/picklist'
	import {XTextarea, Group, XInput, Checklist, Calendar, TransferDom, Popup, XSwitch, Cell, XButton, CellBox, Datetime, Checker, CheckerItem, Flexbox, FlexboxItem} from 'vux'
	export default {
		name: "newActivity",
		directives: {
			TransferDom
		},
		components:{
			PickList,
			Group,
			XInput,
			XTextarea,
			Checklist,
			Calendar,
			TransferDom,
			Popup,
			XSwitch,
			Cell,
			XButton,
			CellBox,
			Datetime,
			Checker,
			CheckerItem,
			Flexbox,
			FlexboxItem
		},
		data() {
			return {
				title: '',
				content: '',
				show: false,
				attendees: '',
				userListTitle: '用户列表',
				objectList: [],
				objectListValue: [],
				fullValues: [],
				minuteListValue: '',
				time: '时间',
				items: [],
				activity_id: '',
				activity_type: '',
				activity_type_id: '',
				showPopup: false,
				error: ''
			}
		},
		created: function () {
			bus.$emit("barController", 1)
			bus.$emit("setTopSimpleTitle", '新建活动')
			this.minuteListValue = dateutils.getYYMMDDHHmm(new Date())
		},
		mounted: function () {
			let user = this.$store.state.user.userModel.sysUser
			this.$refs.employeeRef.fullValues.push({label: user.nickname, value: user.id})

			if(this.$route.params.name && this.$route.params.id){
				this.$refs.customerRef.fullValues.push({label: this.$route.params.name, value: this.$route.params.id})
			}

			let _this = this
			NetWorking.doGet(
				'list_of_value/getListOfValueByType',
				null,
				{
					params: {
						type: 'S_LOV_SALES'
					}
				}
			).then(
				response => {
					let rs = response.data
					if(rs.error_code == 0){
						_this.items = rs.list_of_value

						for(let i=0; i<_this.items.length; i++){
							if(i == 0){
								_this.activity_type_id = _this.items[i].id
								_this.activity_type = _this.items[i].value
							}
						}
					}else{
						alert(rs.error_message)
					}
				}
			)
		},
		methods: {
			cancel: function () {
				this.$router.go(-1)
			},
			onItemClick (value) {
				this.activity_type_id = value

				if (!this.disabled) {
					this.showPopup = false
				}
			},
			createActivity: function () {
				if(this.minuteListValue == ''
					|| this.activity_type == ''
					|| this.$refs.employeeRef.fullValues == ''
					|| this.$refs.customerRef.fullValues == ''){
					this.error = "请确认填入的值是正确的"
					return
				}

				NetWorking.doPost(
					'activities',
					null,
					{
						title: this.title,
						content: this.content,
						time: this.minuteListValue,
						type_id: this.activity_type_id
					},
					{
						headers: {
							'Content-Type': 'application/json;charset=utf-8',
							'data': 'JSON.stringify(json)'
						},
						params: {
							"employeeList": JSON.stringify(this.$refs.employeeRef.fullValues),
							"customerList": JSON.stringify(this.$refs.customerRef.fullValues),
							"rolePlay": 'consultant'
						}
					}
				).then(
					response => {
						let rs = response.data
						if(rs.error_code == 0){
							this.$router.go(-1)
						}else{
							alert(rs.error_message);
						}
					}
				)

				this.$emit('showTabbar', true)
			}
		}
	}
</script>

<style>
	.error{
		font-size: 15px;
		color:red;
		text-align: center;
		margin-top: 10px;
	}

	.newActivityCell {
		padding: 0px 15px !important;
	}

	.newActivity {
		background-color: white;
		border: solid;
		border-color: #f7f7fa;
		margin-left: 5px;
		margin-right: 5px;
		margin-top: 56px;
		box-shadow: 5px 5px 5px #888888;
		border-radius: 25px;
		margin-bottom: 100px;
	}
	.button-group {
		border-radius: 25px;
	}

	.popupUserlist {
		margin-top: 56px;
		width:100%;
		height:100%;
	}

	.buttonActivity {
		margin-top: 20px;
		margin-bottom: 20px;
		width: 90% !important;

	}

	.vux-datetime{
		text-decoration:none
	}

	.demo4-item {
		background-color: #ddd;
		color: #222;
		font-size: 14px;
		padding: 5px 10px;
		margin-right: 10px;
		line-height: 18px;
		border-radius: 15px;
	}
	.demo4-item-selected {
		background-color: #FF3B3B;
		color: #fff;
	}
	.demo4-item-disabled {
		color: #999;
	}
</style>
